<template>
    <div class='canvas-panel-container'>
      <div class="canvas-panel">
      <!-- 画板组件列表 -->
        <div class='canvas-panel-components'>
          <div class='edit-drag'
               :class='{activeNode: clickNodeIndex === index}'
               :style="getCommonStyle(item.commonStyle)"
               v-for="(item, index) in projectData.elements" :key='item.uuid'
               @click='elementClick(item, index)'>
            <component :is="item.elName" class="element-on-edit-pane"
                       v-bind="{...item.propsValue }"/>
          </div>
        </div>
      <!--  画板工具条  -->
        <div class='canvas-panel-tools' v-if='editorActiveUuid || projectData.elements.length'>
          <el-tooltip v-for="(item, index) in toolOptions" :key="index" effect="dark"
                      :content="item.title"
                      placement="right">
            <div class="tools-menu-item"
                 @click="handleElementCommand(item.value)">
              <i class="" :class="[item.icon]"></i>
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { registerComponents } from '@/components/EditorPage/plugins';
import { getCommonStyle } from '../utils';

export default {
  name: 'editPanel',
  components: {
    // 注册自定义组件
    ...registerComponents,
  },
  data() {
    return {
      // 当前点击的组件
      clickNodeIndex: 0,
      // 工具条
      toolOptions: [
        {
          title: '复制',
          icon: 'iconfont iconfuzhi',
          value: 'copy',
        }, {
          title: '删除',
          icon: 'iconfont iconshanchu',
          value: 'delete',
        }, {
          title: '字体放大',
          icon: 'iconfont iconyueduye_zitizengda',
          value: 'fontA+',
        }, {
          title: '字体缩小',
          icon: 'iconfont iconyueduye_zitijianxiao',
          value: 'fontA-',
        }, {
          title: '字体加粗',
          icon: 'iconfont iconjiacu',
          value: 'fontB',
        }, {
          title: '图层上移',
          icon: 'iconfont iconshangyi',
          value: 'layerUp',
        }, {
          title: '图层下移',
          icon: 'iconfont iconxiayi',
          value: 'layerDown',
        },
        // {
      //   title: '图层置顶',
      //   icon: 'iconfont iconzhiding',
      //   value: 'layerTop',
      // }, {
      //   title: '图层置底',
      //   icon: 'iconfont iconzhidi',
      //   value: 'layerBottom',
      // }
      ],
      getCommonStyle,
    };
  },
  computed: {
    ...mapState({
      projectData: (state) => state.editor.projectData,
      editorActiveUuid: (state) => state.editor.editorActiveUuid,
    }),
  },
  methods: {
    // 组件节点点击
    async elementClick(node, index) {
      this.clickNodeIndex = index;
      await this.$store.dispatch('setActiveUuid', node.uuid);
    },
    // 工具条点击
    handleElementCommand(command) {
      // 触发操作
      this.$store.dispatch('elementCommand', command);
    },
  },
};
</script>

<style scoped lang='less'>
  .edit-drag {
    transition: all .3s;
    border: 1px solid transparent;
    &:hover,.activeNode {
      border-color: #42b983;
    }
  }
</style>
